<template>
  <div class="count-wrapper">
    <div v-for="(s, idx) in list" :key="idx" class="count-str">{{ s }}</div>
  </div>
</template>

<script>
export default {
  props: {
    number: { type: [String,Number] },
  },
  data() {
    return {
      list: [],
    };
  },
  watch: {
    number: {
      handler() {
        this.computedList();
      },
      immediate: true,
    },
  },
  methods: {
    computedList() {
      let s = String(this.number);
      s = s.padStart(5, '0');
      this.list = s.split("");
    },
  },
};
</script>

<style lang="scss" scoped>
.count-wrapper {
  display: flex;
  .count-str {
    width: 30px;
    height: 38px;
    line-height: 38px;
    // margin-right: 10px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("./images/122331@2x.png");

    font-size: 26px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #89eaff;
  }
}
</style>
